<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>林小雨的个人主页 - 智能社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #4f46e5;
            --primary-light: #818cf8;
            --secondary-color: #2563eb;
            --accent-color: #ec4899;
            --light-bg: #f8fafc;
            --card-bg: #ffffff;
            --text-dark: #1e293b;
            --text-light: #64748b;
            --border-color: #e2e8f0;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: var(--light-bg);
            color: var(--text-dark);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: var(--primary-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        /* 封面和头像区域 */
        .profile-cover {
            height: 300px;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://picsum.photos/id/1027/1200/400') center/cover no-repeat;
            position: relative;
            border-radius: 12px 12px 0 0;
        }
        
        .profile-avatar-container {
            position: absolute;
            bottom: -60px;
            left: 50px;
        }
        
        .profile-avatar {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: var(--shadow-md);
        }
        
        .verify-badge {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background-color: var(--primary-color);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid white;
        }
        
        /* 个人信息区域 */
        .profile-header {
            padding-top: 80px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .profile-name {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .profile-title {
            color: var(--text-light);
            margin-bottom: 15px;
        }
        
        .profile-actions {
            display: flex;
            gap: 10px;
        }
        
        /* 内容区域 */
        .content-container {
            background-color: var(--card-bg);
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }
        
        /* 个人资料卡片 */
        .profile-card {
            background-color: var(--card-bg);
            border-radius: 10px;
            box-shadow: var(--shadow-sm);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .profile-card-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .profile-info-item {
            display: flex;
            margin-bottom: 12px;
        }
        
        .profile-info-label {
            flex: 0 0 100px;
            color: var(--text-light);
            font-weight: 500;
        }
        
        .profile-info-value {
            flex: 1;
        }
        
        .interest-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        
        .interest-tag {
            background-color: rgba(79, 70, 229, 0.1);
            color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
        }
        
        /* 匹配度指示器 */
        .compatibility-meter {
            height: 8px;
            background-color: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .compatibility-fill {
            height: 100%;
            background: linear-gradient(90deg, #ec4899, #8b5cf6);
            width: 98%;
        }
        
        /* 留言板样式 */
        .message-board {
            background-color: var(--card-bg);
            border-radius: 10px;
            box-shadow: var(--shadow-sm);
            padding: 20px;
        }
        
        .message-input-container {
            margin-bottom: 30px;
        }
        
        .message-input {
            display: flex;
            gap: 10px;
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .message-input-field {
            flex: 1;
        }
        
        .message-textarea {
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 15px;
            resize: none;
            transition: var(--transition);
        }
        
        .message-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        .message-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 10px;
        }
        
        /* 留言列表样式 */
        .message-list {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .message-item {
            display: flex;
            gap: 15px;
        }
        
        .message-content {
            flex: 1;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .message-author {
            font-weight: 600;
        }
        
        .message-time {
            font-size: 0.8rem;
            color: var(--text-light);
        }
        
        .message-body {
            background-color: #f1f5f9;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
        }
        
        .message-footer {
            display: flex;
            gap: 15px;
            font-size: 0.9rem;
        }
        
        .message-action {
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .message-action:hover {
            color: var(--primary-color);
        }
        
        /* 回复样式 */
        .replies-container {
            margin-left: 55px;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed var(--border-color);
        }
        
        .reply-item {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .reply-content {
            flex: 1;
        }
        
        .reply-body {
            background-color: #f8fafc;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 5px;
            font-size: 0.95rem;
        }
        
        .reply-form {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }
        
        /* 照片墙样式 */
        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        
        .gallery-item {
            height: 120px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .gallery-item:hover img {
            transform: scale(1.05);
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition);
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-overlay i {
            color: white;
            font-size: 1.5rem;
        }
        
        /* 标签页样式 */
        .profile-tabs {
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }
        
        .profile-tab {
            padding: 15px 20px;
            display: inline-block;
            cursor: pointer;
            position: relative;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .profile-tab.active {
            color: var(--primary-color);
        }
        
        .profile-tab.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 3px 3px 0 0;
        }
        
        .profile-tab:hover:not(.active) {
            color: var(--primary-color);
            background-color: rgba(79, 70, 229, 0.05);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .profile-cover {
                height: 200px;
            }
            
            .profile-avatar-container {
                left: 20px;
            }
            
            .profile-avatar {
                width: 100px;
                height: 100px;
            }
            
            .profile-header {
                padding-top: 60px;
                padding-bottom: 15px;
            }
            
            .profile-actions {
                flex-wrap: wrap;
            }
            
            .profile-actions .btn {
                flex: 1;
                min-width: 120px;
            }
            
            .photo-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .replies-container {
                margin-left: 45px;
            }
        }
        
        /* 按钮样式 */
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            transition: var(--transition);
        }
        
        .btn-primary:hover {
            background-color: #4338ca;
            border-color: #4338ca;
            transform: translateY(-2px);
        }
        
        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
            transition: var(--transition);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }
        
        .btn-accent {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: white;
            transition: var(--transition);
        }
        
        .btn-accent:hover {
            background-color: #db2777;
            border-color: #db2777;
            transform: translateY(-2px);
            color: white;
        }
        
        /* 动画效果 */
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-robot"></i>
                <span>智能社交</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">AI交友推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">兴趣社群</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">匹配设置</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="position-relative">
                        <button class="btn btn-outline-light">
                            <i class="fas fa-bell"></i>
                        </button>
                        <span class="position-absolute top-0 right-0 translate-middle badge rounded-circle bg-danger">3</span>
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的匹配</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <div class="content-container">
            <!-- 封面和头像 -->
            <div class="profile-cover">
                <div class="profile-avatar-container">
                    <img src="https://picsum.photos/id/1012/140/140" alt="林小雨的头像" class="profile-avatar">
                    <div class="verify-badge">
                        <i class="fas fa-check"></i>
                    </div>
                </div>
            </div>
            
            <!-- 个人信息头部 -->
            <div class="container profile-header">
                <div class="row">
                    <div class="col-md-8">
                        <h1 class="profile-name">林小雨</h1>
                        <div class="profile-title">
                            <i class="fas fa-map-marker-alt me-1"></i> 上海 · 音乐教师 · 28岁
                        </div>
                        <div class="d-flex items-center gap-3">
                            <div class="d-flex items-center gap-1">
                                <div class="match-percentage" style="background-color: rgba(236, 72, 153, 0.1); color: var(--accent-color); padding: 3px 10px; border-radius: 20px; font-size: 0.9rem;">
                                    98% 匹配
                                </div>
                            </div>
                            <div class="text-success d-flex items-center gap-1">
                                <i class="fas fa-circle" style="font-size: 0.7rem;"></i>
                                <span style="font-size: 0.9rem;">正在线上</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 d-flex justify-content-md-end">
                        <div class="profile-actions">
                            <button class="btn btn-accent">
                                <i class="fas fa-comment me-1"></i> 发送消息
                            </button>
                            <button class="btn btn-outline-primary">
                                <i class="far fa-heart me-1"></i> 关注
                            </button>
                            <div class="dropdown">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#"><i class="fas fa-share-alt me-2"></i>分享资料</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="fas fa-flag me-2"></i>举报</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="fas fa-user-shield me-2"></i>屏蔽用户</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 内容标签页 -->
            <div class="container py-4">
                <div class="profile-tabs">
                    <div class="profile-tab active" data-tab="about">个人资料</div>
                    <div class="profile-tab" data-tab="photos">照片墙</div>
                    <div class="profile-tab" data-tab="messages">留言板</div>
                    <div class="profile-tab" data-tab="compatibility">匹配分析</div>
                </div>
                
                <!-- 个人资料标签页内容 -->
                <div class="tab-content active" id="about">
                    <div class="row">
                        <div class="col-md-8">
                            <!-- 个人简介 -->
                            <div class="profile-card">
                                <div class="profile-card-title">
                                    <i class="fas fa-user-circle text-primary"></i> 个人简介
                                </div>
                                <p>
                                    热爱音乐和旅行的钢琴教师，毕业于上海音乐学院。平时喜欢弹奏古典音乐和爵士乐，周末经常参加各类音乐会和音乐节。
                                    闲暇时喜欢去城市周边旅行，用相机记录美好的瞬间。希望能找到志同道合的朋友一起分享音乐和生活的美好。
                                </p>
                                <p>
                                    性格开朗乐观，喜欢结交新朋友，相信音乐能连接心灵。
                                </p>
                            </div>
                            
                            <!-- 兴趣爱好 -->
                            <div class="profile-card">
                                <div class="profile-card-title">
                                    <i class="fas fa-heart text-primary"></i> 兴趣爱好
                                </div>
                                <div class="interest-tags">
                                    <span class="interest-tag"><i class="fas fa-music me-1"></i> 钢琴演奏</span>
                                    <span class="interest-tag"><i class="fas fa-plane me-1"></i> 旅行</span>
                                    <span class="interest-tag"><i class="fas fa-camera me-1"></i> 摄影</span>
                                    <span class="interest-tag"><i class="fas fa-book me-1"></i> 阅读</span>
                                    <span class="interest-tag"><i class="fas fa-utensils me-1"></i> 美食探索</span>
                                    <span class="interest-tag"><i class="fas fa-hiking me-1"></i> 徒步旅行</span>
                                    <span class="interest-tag"><i class="fas fa-film me-1"></i> 独立电影</span>
                                    <span class="interest-tag"><i class="fas fa-coffee me-1"></i> 咖啡品鉴</span>
                                </div>
                            </div>
                            
                            <!-- 最近动态 -->
                            <div class="profile-card">
                                <div class="profile-card-title">
                                    <i class="fas fa-clock text-primary"></i> 最近动态
                                </div>
                                
                                <div class="mb-4 pb-4 border-bottom">
                                    <div class="d-flex gap-3">
                                        <img src="https://picsum.photos/id/1012/50/50" alt="林小雨的头像" class="rounded-circle" width="50" height="50">
                                        <div>
                                            <div class="d-flex items-center gap-2 mb-1">
                                                <span class="font-weight-bold">林小雨</span>
                                                <span class="text-light text-sm">昨天 19:30</span>
                                            </div>
                                            <p class="mb-2">今天去听了一场很棒的爵士音乐会，现场氛围太赞了！🎷</p>
                                            <div class="row gap-2">
                                                <div class="col-6">
                                                    <img src="https://picsum.photos/id/1082/300/200" alt="音乐会现场" class="rounded w-100">
                                                </div>
                                                <div class="col-6">
                                                    <img src="https://picsum.photos/id/1073/300/200" alt="音乐会现场" class="rounded w-100">
                                                </div>
                                            </div>
                                            <div class="d-flex gap-3 mt-2 text-sm">
                                                <span class="text-light cursor-pointer"><i class="far fa-heart me-1"></i> 24</span>
                                                <span class="text-light cursor-pointer"><i class="far fa-comment me-1"></i> 8</span>
                                                <span class="text-light cursor-pointer"><i class="far fa-share-square me-1"></i> 分享</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="d-flex gap-3">
                                        <img src="https://picsum.photos/id/1012/50/50" alt="林小雨的头像" class="rounded-circle" width="50" height="50">
                                        <div>
                                            <div class="d-flex items-center gap-2 mb-1">
                                                <span class="font-weight-bold">林小雨</span>
                                                <span class="text-light text-sm">3天前</span>
                                            </div>
                                            <p>周末去郊外拍摄的日落，分享给大家 🌇</p>
                                            <img src="https://picsum.photos/id/1015/600/400" alt="日落照片" class="rounded w-100 my-2">
                                            <div class="d-flex gap-3 mt-2 text-sm">
                                                <span class="text-light cursor-pointer"><i class="far fa-heart me-1"></i> 42</span>
                                                <span class="text-light cursor-pointer"><i class="far fa-comment me-1"></i> 15</span>
                                                <span class="text-light cursor-pointer"><i class="far fa-share-square me-1"></i> 分享</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <!-- 基本信息 -->
                            <div class="profile-card">
                                <div class="profile-card-title">
                                    <i class="fas fa-info-circle text-primary"></i> 基本信息
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">性别</div>
                                    <div class="profile-info-value">女</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">年龄</div>
                                    <div class="profile-info-value">28岁</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">星座</div>
                                    <div class="profile-info-value">天秤座</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">身高</div>
                                    <div class="profile-info-value">165cm</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">职业</div>
                                    <div class="profile-info-value">音乐教师</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">学历</div>
                                    <div class="profile-info-value">硕士</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">所在地</div>
                                    <div class="profile-info-value">上海 静安区</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">距离</div>
                                    <div class="profile-info-value">3.2公里</div>
                                </div>
                                
                                <div class="profile-info-item">
                                    <div class="profile-info-label">活跃时间</div>
                                    <div class="profile-info-value">每天 19:00-22:00</div>
                                </div>
                            </div>
                            
                            <!-- 匹配度分析 -->
                            <div class="profile-card">
                                <div class="profile-card-title">
                                    <i class="fas fa-percent text-primary"></i> 匹配度分析
                                </div>
                                
                                <div class="d-flex justify-content-between mb-1">
                                    <span>总体匹配度</span>
                                    <span class="font-weight-bold">98%</span>
                                </div>
                                <div class="compatibility-meter">
                                    <div class="compatibility-fill"></div>
                                </div>
                                
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>兴趣爱好匹配</span>
                                        <span class="font-weight-bold">95%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 95%;"></div>
                                    </div>
                                </div>
                                
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>性格特质匹配</span>
                                        <span class="font-weight-bold">99%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 99%;"></div>
                                    </div>
                                </div>
                                
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>生活方式匹配</span>
                                        <span class="font-weight-bold">92%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 92%;"></div>
                                    </div>
                                </div>
                                
                                <button class="btn btn-outline-primary w-100 mt-4">
                                    <i class="fas fa-chart-line me-1"></i> 查看详细匹配报告
                                </button>
                            </div>
                            
                            <!-- 共同好友 -->
                            <div class="profile-card">
                                <div class="profile-card-title">
                                    <i class="fas fa-users text-primary"></i> 共同好友
                                </div>
                                
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="text-center">
                                        <img src="https://picsum.photos/id/1025/60/60" alt="共同好友" class="rounded-circle mb-1" width="60" height="60">
                                        <div class="font-size-sm">王浩</div>
                                    </div>
                                    <div class="text-center">
                                        <img src="https://picsum.photos/id/1066/60/60" alt="共同好友" class="rounded-circle mb-1" width="60" height="60">
                                        <div class="font-size-sm">张雪</div>
                                    </div>
                                    <div class="text-center">
                                        <img src="https://picsum.photos/id/1074/60/60" alt="共同好友" class="rounded-circle mb-1" width="60" height="60">
                                        <div class="font-size-sm">李明</div>
                                    </div>
                                </div>
                                
                                <div class="text-center mt-3">
                                    <span class="text-primary cursor-pointer">共3位共同好友</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 照片墙标签页内容 -->
                <div class="tab-content" id="photos">
                    <div class="profile-card">
                        <div class="profile-card-title">
                            <i class="fas fa-images text-primary"></i> 照片墙 <span class="text-light" style="font-size: 0.9rem; font-weight: normal;">(12张照片)</span>
                        </div>
                        
                        <div class="photo-gallery">
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1027/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1062/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1015/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1039/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1043/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1082/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1073/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1083/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                            <div class="gallery-item">
                                <img src="https://picsum.photos/id/1069/300/300" alt="林小雨的照片">
                                <div class="gallery-overlay">
                                    <i class="fas fa-search-plus"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 留言板标签页内容 -->
                <div class="tab-content" id="messages">
                    <div class="message-board">
                        <div class="message-input-container">
                            <h3 class="mb-3">留言板</h3>
                            <div class="message-input">
                                <img src="https://picsum.photos/id/64/40/40" alt="你的头像" class="message-avatar">
                                <div class="message-input-field">
                                    <textarea class="message-textarea" rows="3" placeholder="写下你想对林小雨说的话..."></textarea>
                                    <div class="message-actions">
                                        <button class="btn btn-outline-primary">
                                            <i class="far fa-image me-1"></i> 图片
                                        </button>
                                        <button class="btn btn-primary">
                                            <i class="fas fa-paper-plane me-1"></i> 发送留言
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="message-list">
                            <!-- 留言1 -->
                            <div class="message-item">
                                <img src="https://picsum.photos/id/1025/40/40" alt="王浩的头像" class="message-avatar">
                                <div class="message-content">
                                    <div class="message-header">
                                        <div class="message-author">王浩</div>
                                        <div class="message-time">3天前</div>
                                    </div>
                                    <div class="message-body">
                                        小雨你好！上次音乐会真的很棒，谢谢你的推荐，希望下次有机会可以一起去听。
                                    </div>
                                    <div class="message-footer">
                                        <div class="message-action">
                                            <i class="far fa-heart"></i> 点赞 (8)
                                        </div>
                                        <div class="message-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                    
                                    <!-- 回复列表 -->
                                    <div class="replies-container">
                                        <!-- 回复1 -->
                                        <div class="reply-item">
                                            <img src="https://picsum.photos/id/1012/40/40" alt="林小雨的头像" class="message-avatar">
                                            <div class="reply-content">
                                                <div class="message-header">
                                                    <div class="message-author">林小雨 <span style="color: var(--text-light); font-weight: normal;">回复</span> 王浩</div>
                                                    <div class="message-time">2天前</div>
                                                </div>
                                                <div class="reply-body">
                                                    不客气！我也觉得很棒，下次有好的音乐会一定告诉你 😊
                                                </div>
                                                <div class="message-footer">
                                                    <div class="message-action">
                                                        <i class="far fa-heart"></i> 点赞 (3)
                                                    </div>
                                                    <div class="message-action reply-btn">
                                                        <i class="far fa-comment"></i> 回复
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!-- 回复输入框 (默认隐藏) -->
                                        <div class="reply-form" style="display: none;">
                                            <img src="https://picsum.photos/id/64/40/40" alt="你的头像" class="message-avatar">
                                            <div class="message-input-field">
                                                <textarea class="message-textarea" rows="2" placeholder="回复王浩..."></textarea>
                                                <div class="message-actions">
                                                    <button class="btn btn-outline-primary cancel-reply">取消</button>
                                                    <button class="btn btn-primary">发送回复</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 留言2 -->
                            <div class="message-item">
                                <img src="https://picsum.photos/id/1066/40/40" alt="张雪的头像" class="message-avatar">
                                <div class="message-content">
                                    <div class="message-header">
                                        <div class="message-author">张雪</div>
                                        <div class="message-time">1周前</div>
                                    </div>
                                    <div class="message-body">
                                        小雨老师，你的钢琴弹得真好听！上次在音乐会上听你演奏的曲子，我到现在还记忆犹新。不知道有没有机会可以向你请教一些钢琴技巧呢？
                                    </div>
                                    <div class="message-footer">
                                        <div class="message-action">
                                            <i class="far fa-heart"></i> 点赞 (15)
                                        </div>
                                        <div class="message-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                    
                                    <!-- 回复列表 -->
                                    <div class="replies-container">
                                        <!-- 回复1 -->
                                        <div class="reply-item">
                                            <img src="https://picsum.photos/id/1012/40/40" alt="林小雨的头像" class="message-avatar">
                                            <div class="reply-content">
                                                <div class="message-header">
                                                    <div class="message-author">林小雨 <span style="color: var(--text-light); font-weight: normal;">回复</span> 张雪</div>
                                                    <div class="message-time">6天前</div>
                                                </div>
                                                <div class="reply-body">
                                                    谢谢你的喜欢！当然可以呀，我们可以约个时间一起交流~
                                                </div>
                                                <div class="message-footer">
                                                    <div class="message-action">
                                                        <i class="far fa-heart"></i> 点赞 (6)
                                                    </div>
                                                    <div class="message-action reply-btn">
                                                        <i class="far fa-comment"></i> 回复
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 留言3 -->
                            <div class="message-item">
                                <img src="https://picsum.photos/id/1074/40/40" alt="李明的头像" class="message-avatar">
                                <div class="message-content">
                                    <div class="message-header">
                                        <div class="message-author">李明</div>
                                        <div class="message-time">2周前</div>
                                    </div>
                                    <div class="message-body">
                                        你拍的照片真漂亮，尤其是那张日落的，构图和色彩都很专业！请问你用的是什么相机呢？
                                    </div>
                                    <div class="message-footer">
                                        <div class="message-action">
                                            <i class="far fa-heart"></i> 点赞 (21)
                                        </div>
                                        <div class="message-action reply-btn">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 匹配分析标签页内容 -->
                <div class="tab-content" id="compatibility">
                    <div class="profile-card">
                        <div class="profile-card-title">
                            <i class="fas fa-chart-pie text-primary"></i> 详细匹配分析
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <div class="d-flex justify-content-between mb-1">
                                    <span>总体匹配度</span>
                                    <span class="font-weight-bold text-accent">98%</span>
                                </div>
                                <div class="compatibility-meter">
                                    <div class="compatibility-fill"></div>
                                </div>
                                <p class="text-sm text-light mt-2">你们是非常理想的匹配，在多个维度上有很高的契合度</p>
                            </div>
                            <div class="col-md-6 text-center">
                                <button class="btn btn-accent pulse">
                                    <i class="fas fa-bolt me-1"></i> 超级匹配
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-5">
                            <h5 class="mb-3">匹配维度分析</h5>
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>兴趣爱好匹配</span>
                                        <span class="font-weight-bold">95%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 95%;"></div>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-sm"><strong>共同兴趣：</strong> 音乐、旅行、摄影、阅读</p>
                                        <p class="text-sm"><strong>潜在共同活动：</strong> 音乐会、户外摄影、书籍分享</p>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>性格特质匹配</span>
                                        <span class="font-weight-bold">99%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 99%;"></div>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-sm"><strong>相似特质：</strong> 乐观开朗、富有创造力、善良体贴</p>
                                        <p class="text-sm"><strong>互补特质：</strong> 你更果断，对方更善于倾听</p>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>生活方式匹配</span>
                                        <span class="font-weight-bold">92%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 92%;"></div>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-sm"><strong>相似习惯：</strong> 喜欢周末外出、注重健康饮食</p>
                                        <p class="text-sm"><strong>活跃时间：</strong> 晚上19:00-22:00高度重合</p>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span>价值观匹配</span>
                                        <span class="font-weight-bold">97%</span>
                                    </div>
                                    <div class="compatibility-meter">
                                        <div class="compatibility-fill" style="width: 97%;"></div>
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-sm"><strong>一致观点：</strong> 重视家庭、追求个人成长、热爱生活</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-5">
                            <h5 class="mb-3">推荐互动话题</h5>
                            <div class="interest-tags">
                                <span class="interest-tag"><i class="fas fa-music me-1"></i> 近期音乐会推荐</span>
                                <span class="interest-tag"><i class="fas fa-camera me-1"></i> 摄影技巧分享</span>
                                <span class="interest-tag"><i class="fas fa-book me-1"></i> 最近阅读的书籍</span>
                                <span class="interest-tag"><i class="fas fa-plane me-1"></i> 旅行目的地推荐</span>
                                <span class="interest-tag"><i class="fas fa-utensils me-1"></i> 上海美食探店</span>
                            </div>
                        </div>
                        
                        <div class="text-center">
                            <button class="btn btn-accent">
                                <i class="fas fa-comment-dots me-1"></i> 基于匹配度推荐聊天内容
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <footer class="bg-dark text-white py-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h4 class="mb-3 d-flex align-items-center gap-2">
                        <i class="fas fa-robot"></i> 智能社交
                    </h4>
                    <p>基于AI技术的智能交友平台，帮助你找到最合适的朋友和伴侣。</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-light">首页</a></li>
                        <li><a href="#" class="text-light">AI交友推荐</a></li>
                        <li><a href="#" class="text-light">兴趣社群</a></li>
                        <li><a href="#" class="text-light">关于我们</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">联系我们</h5>
                    <ul class="list-unstyled">
                        <li class="d-flex align-items-center gap-2"><i class="fas fa-envelope"></i> contact@aisocial.com</li>
                        <li class="d-flex align-items-center gap-2"><i class="fas fa-phone"></i> 400-123-4567</li>
                    </ul>
                    <div class="mt-3 d-flex gap-3">
                        <a href="#" class="text-light"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-qq fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5 pt-3 border-top border-secondary">
                <p>&copy; 2023 智能社交 AI交友平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 标签页切换功能
        document.querySelectorAll('.profile-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                // 移除所有标签的活跃状态
                document.querySelectorAll('.profile-tab').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 隐藏所有内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                });
                
                // 激活当前标签
                this.classList.add('active');
                
                // 显示对应内容
                const tabId = this.getAttribute('data-tab');
                document.getElementById(tabId).classList.add('active');
            });
        });
        
        // 回复按钮功能
        document.querySelectorAll('.reply-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 隐藏所有回复框
                document.querySelectorAll('.reply-form').forEach(form => {
                    form.style.display = 'none';
                });
                
                // 在当前留言下方显示回复框
                const repliesContainer = this.closest('.message-content, .reply-content').querySelector('.replies-container') || 
                                       this.closest('.message-content, .reply-content').parentElement.appendChild(document.createElement('div'));
                
                // 如果没有回复容器，创建一个
                if (!this.closest('.message-content, .reply-content').querySelector('.replies-container')) {
                    repliesContainer.className = 'replies-container';
                    repliesContainer.style.marginLeft = '55px';
                    repliesContainer.style.marginTop = '15px';
                    repliesContainer.style.paddingTop = '15px';
                    repliesContainer.style.borderTop = '1px dashed var(--border-color)';
                }
                
                // 检查是否已有回复框
                let replyForm = repliesContainer.querySelector('.reply-form');
                
                if (!replyForm) {
                    // 创建回复框
                    replyForm = document.createElement('div');
                    replyForm.className = 'reply-form';
                    replyForm.innerHTML = `
                        <img src="https://picsum.photos/id/64/40/40" alt="你的头像" class="message-avatar">
                        <div class="message-input-field">
                            <textarea class="message-textarea" rows="2" placeholder="写下你的回复..."></textarea>
                            <div class="message-actions">
                                <button class="btn btn-outline-primary cancel-reply">取消</button>
                                <button class="btn btn-primary">发送回复</button>
                            </div>
                        </div>
                    `;
                    repliesContainer.appendChild(replyForm);
                    
                    // 添加取消回复功能
                    replyForm.querySelector('.cancel-reply').addEventListener('click', function() {
                        replyForm.style.display = 'none';
                    });
                } else {
                    // 显示已有的回复框
                    replyForm.style.display = 'flex';
                }
                
                // 自动聚焦到文本框
                replyForm.querySelector('textarea').focus();
            });
        });
        
        // 点赞功能
        document.querySelectorAll('.message-action').forEach(action => {
            if (action.querySelector('.fa-heart')) {
                action.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    let countText = this.textContent.trim().split('(')[1];
                    let count = countText ? parseInt(countText.replace(')', '')) : 0;
                    
                    if (icon.classList.contains('far')) {
                        // 点赞
                        icon.classList.remove('far');
                        icon.classList.add('fas', 'text-danger');
                        count++;
                    } else {
                        // 取消点赞
                        icon.classList.remove('fas', 'text-danger');
                        icon.classList.add('far');
                        count--;
                    }
                    
                    // 更新点赞数
                    this.innerHTML = `<i class="${icon.classList.value}"></i> 点赞 (${count})`;
                });
            }
        });
        
        // 关注按钮功能
        const followBtn = document.querySelector('.btn-outline-primary:has(.fa-heart)');
        if (followBtn) {
            followBtn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    // 关注
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.textContent = ' 已关注';
                    this.prepend(icon);
                    this.classList.add('text-primary');
                } else {
                    // 取消关注
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.textContent = ' 关注';
                    this.prepend(icon);
                    this.classList.remove('text-primary');
                }
            });
        }
    </script>
</body>
</html>

